<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{{person.name}}</h2>
	<h2>年龄：{{person.age}}</h2>
  <button @click="test">测试触发一下Demo组件的Hello事件</button>
</template>

<script>
import {reactive} from 'vue'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Demo',
  props:['msg','school'],
  emits:['hello'],
  setup(props,context){
    // console.log('---setup---',props)
    // console.log('---setup---',context)
    // console.log('---setup---',context.attrs) //相当与Vue2中的$attrs
		// console.log('---setup---',context.emit) //触发自定义事件的。
    console.log('---setup---',context.slots) //插槽
    // 数据
    let person = reactive({
      name:'张三',
      age:18
    })

    // 方法
    function test(){
      context.emit('hello',666)
    }
    
    // 返回一个对象(常用)
    return {
      person,
      test
    }

  }
}
</script>
